<template>
  <div class="map" ref="map">
    <Swipe></Swipe>
  </div>
</template>

<script>
import Vue from 'vue';
import MapClass from "./MapClass.js";
import mapConfig from "./mapConfig.js";
import Swipe from "./components/Swipe.vue";
export default {
  components: {
    Swipe
  },
  props: {
    mapInstance: {
      type: String,
      default: "$map"
    },
    mapConfig: {
      type: Object,
      default: () => {
        return mapConfig;
      }
    }
  },
  beforeDestroy() {
    let mapInstance = Vue.prototype[this.mapInstance];
    if(mapInstance) {
      mapInstance.destroy();
      mapInstance = null;
    }
  },
  mounted(){
    // 默认添加地图实例 Vue.prototype.$map
    Vue.prototype[this.mapInstance] = new MapClass(this.$refs.map, this.mapConfig);
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
  background-color: #171928;
  overflow: hidden;
  position: relative;
}
</style>